import { Button, Flex, GetProps, Input, Popconfirm, Space, Table } from "antd";
import { useEffect, useRef, useState } from "react";
import { User, userDelete, userList, userPassReset } from "./userApi";
import { FilterDTO } from "@/api/interface";
import FormDrawer from "./form";
import { getPage, initFilter } from "@/config/page";
import ConfirmButton from "@/components/Button/ConfirmButton";
import { deleteById, updateById } from "@/utils/util";
import ResetPass from "./resetPass";
import TablePro from "@/components/TablePro";
import AuthButton from "@/routers/utils/authButton";
type SearchProps = GetProps<typeof Input.Search>;

const { Search } = Input;

const UserPage = () => {
	const [data, setData] = useState<User.UserDTO[]>([]);
	const [total, setTotal] = useState<number>(0);
	const [filter, setFilter] = useState<FilterDTO>(initFilter);
	const formRef: any = useRef();
	const resetRef: any = useRef();

	useEffect(() => {
		(async () => {
			const res = await userList(filter);
			setData(res.data || []);
			setTotal(res.total);
		})();
	}, [filter]);
	const edit = async (id: string) => {
		formRef.current.open(id);
	};
	const del = async (id: string) => {
		const res = await userDelete(id);
		if (res.code == 0) {
			setData(deleteById(data, "userId", id));
		}
	};
	const resetPass = async (id: string) => {
		const res = await userPassReset(id);
		if (res.code == 0) {
			resetRef.current.open(res.data);
		}
	};
	const columns: any[] = [
		{
			title: "用户名",
			dataIndex: "username",
			key: "username",
			align: "left",
		},
		{
			title: "姓名",
			dataIndex: "name",
			key: "name",
			align: "left",
		},
		{
			title: "邮箱",
			dataIndex: "email",
			key: "email",
			align: "left",
		},
		{
			title: "操作",
			width: 160,
			dataIndex: "userId",
			key: "userId",
			align: "center",
			render: (val: string,record: User.UserDTO) => {
			    if(record.isSys){
					return <></>
				}else{
					return  <Space size="middle">
								<AuthButton permission="user:edit">
									<Button type="link" onClick={() => edit(val)}>
										编辑
									</Button>
								</AuthButton>
								<AuthButton permission="user:fullControl">
									<ConfirmButton title="密码重置" description="确定要重置密码吗？重置后原密码将失效" onConfirm={() => resetPass(val)}>
										重置密码
									</ConfirmButton>
								</AuthButton>
								<AuthButton permission="user:fullControl">
									<ConfirmButton title="删除用户" onConfirm={() => del(val)} />
								</AuthButton>
						    </Space>
				}
			},
		},
	];
	const onSearch: SearchProps["onSearch"] = (value, _e, info) => {
		console.log("search", value);
		setFilter({ ...filter, keyword: value });
	};

	const onUpdate = (val: User.UserDTO) => {
		setData(updateById(data, "userId", val));
	};

	return (
		<div className="card content-box">
			<Flex className="head-line" justify="space-between">
				<Space>
					<Search placeholder="请输入关键字" allowClear onSearch={onSearch} style={{ width: 400 }} />
				</Space>
				<Space>
				<AuthButton permission="user:edit">
					<Button type="primary" onClick={() => formRef.current.open("")}>
						添加用户
					</Button>
				</AuthButton>
				</Space>
			</Flex>
			<TablePro
				bordered={true}
				dataSource={data}
				columns={columns}
				pagination={getPage(total, (val) => setFilter({ ...filter, ...val }))}
			/>

			<FormDrawer update={onUpdate} ref={formRef} />
			<ResetPass ref={resetRef} />
		</div>
	);
};

export default UserPage;
